<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" width="70vw"
			   destroy-on-close @closed="$emit('closed')" align-center :close-on-click-modal="false"
			   :close-on-press-escape="mode != 'show' ? false : true">
		<el-form label-width="110" ref="dialogForm">
			<el-container>
				<el-header style="padding: 40px 15px">
					<div class="topTitle">
						<div>任务编号：{{ form.task_no?form.task_no:'-' }}</div>
						<div>任务名称：{{ form.title?form.title:'-' }}</div>
					</div>
					<div>
						<el-button type="primary" icon="el-icon-plus" @click="add" v-auth="'myTask_record.add'" v-if="isWorkbench == 1"></el-button>
						<el-button type="primary" icon="el-icon-plus" @click="add" v-auth="'task_record.add'" v-if="!isWorkbench"></el-button>
						<el-button type="primary" icon="el-icon-refresh" @click="setData(form)"></el-button>
					</div>
				</el-header>
				<el-main style="max-height: 600px;overflow-y: scroll;min-height: 500px;">
					<el-timeline v-if="followList.length>0">
						<el-timeline-item placement="top"
										  v-for="(item,index) in followList" :key="index"
										  :timestamp="item.create_staff_name+'&nbsp;&nbsp;&nbsp;&nbsp;【'+item.progress_ratio+'%】'" size="large"  color="#0bbd87"
										  icon = "el-icon-success-filled"
						>
							<div class="steps">
								<div v-html="item.content" style="width: 80%;"></div>
								<div style="display: flex;align-items: center;">
									<div style="margin-right: 10px;">{{ item.create_time }}</div>
									<el-popconfirm title="确定删除当前跟进记录吗？" @confirm="batch_del(item)" v-if="!isWorkbench">
										<template #reference>
											<el-button circle icon="el-icon-delete" v-auth="'task_record.delete'"></el-button>
										</template>
									</el-popconfirm>
									<el-popconfirm title="确定删除当前跟进记录吗？" @confirm="batch_del(item)" v-if="isWorkbench == 1">
										<template #reference>
											<el-button circle icon="el-icon-delete" v-auth="'myTask_record.delete'"></el-button>
										</template>
									</el-popconfirm>
								</div>

							</div>
						</el-timeline-item>
					</el-timeline>
					<el-empty v-else :image-size="200" description="暂无跟进记录"></el-empty>
				</el-main>
			</el-container>
		</el-form>
		<template #footer>
			<el-button @click="visible=false">取 消</el-button>
		</template>
	</el-dialog>
	<save-follow v-if="dialog.follow" ref="followDialog" @success="handleSuccess" @closed="dialog.follow = false"></save-follow>
</template>

<script>
import saveFollow from "@/views/task/saveFollow.vue";
export default {
	components: {
		saveFollow
	},
	emits: ['success', 'closed'],
	data() {
		return {
			mode: "add",
			titleMap: {
				add: '任务跟踪记录',
				edit: '任务跟踪记录',
				show: '任务跟踪记录',
			},
			dialog:{
				follow:false
			},
			visible: false,
			isSaveing: false,
			followList:[],
			form:{},
			isWorkbench:null
		}
	},
	mounted() {

	},
	methods: {
		/**删除跟进记录*/
		async batch_del(item) {
			var reqData = { id: item.id }
			var res = await this.$API.task.deleteFollow.post(reqData);
			if (res.code == 1) {
				//这里选择刷新整个表格 OR 插入/编辑现有表格数据
				this.setData(this.form)
			} else {
				this.$alert(res.message, "提示", { type: 'error' })
			}
		},
		/**新增跟进记录事件*/
		handleSuccess() {
			this.setData(this.form)
		},
		/**新增跟进*/
		add() {
			this.dialog.follow = true
			this.$nextTick(() => {
				this.$refs.followDialog.open('add').setData(this.form)
			})
		},
		//显示
		open(mode = 'add') {
			this.mode = mode;
			this.visible = true;
			return this
		},
		//表单提交方法
		submit(e) {
			this.$refs.dialogForm.validate(async (valid) => {
				if (valid) {
					this.isSaveing = true;
					var res = [];
					if (this.form.id) {
						res = await this.$API.procure.order.edit.post(this.form);
					} else {
						res = await this.$API.procure.order.add.post(this.form);
					}
					this.isSaveing = false;
					if (res != '') {
						if (res.code == 1) {
							this.visible = false;
							if (e == 1) {
								this.$emit('success', this.form, this.mode, e)
								this.$message.success("操作成功")
							} else {
								this.$emit('success', res.data, 'check')
							}
						} else {
							this.$alert(res.message, "提示", {type: 'error'})
						}
					}
				}
			})
		},
		//表单注入数据
		async setData(data,isWorkbench) {
			this.isWorkbench = isWorkbench
			this.form.id = data.id
			var res = await this.$API.task.detail.get({id: data.id});
			Object.assign(this.form, res.data)
			this.followList = res.data.follow
		},
	}
}
</script>
<style>
.el-timeline-item__timestamp {
	font-size: 16px!important;
	color: #666666;
	font-weight: bold;
}
</style>
<style lang="scss">
.topTitle {
	>div:nth-child(2) {
		font-size: 16px;
		margin-top: 10px;
		color: #333333;
	}
}
.steps {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding-top: 10px;
	>div:nth-child(1) {

	}
	>div:nth-child(2) {
		font-size: 14px;
		color: #999999;
	}
}
</style>
